<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" center width="820px">
      <div class="itemWrapper">
        <span class="itemTitle">基本信息</span>
      </div>
      <el-descriptions>
        <el-descriptions-item label="学段">{{ baseInfo.period === '1' ? '小学' : baseInfo.period === '2' ? '初中' : '--'}}</el-descriptions-item>
        <el-descriptions-item label="所属年级">{{ baseInfo.gradeName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="入学年份">{{ baseInfo.year || '--'}}</el-descriptions-item>
        <el-descriptions-item label="班级名称">{{ baseInfo.name || '--'}}</el-descriptions-item>
        <el-descriptions-item label="班主任">{{ baseInfo.headName || '--'}}</el-descriptions-item>
        <el-descriptions-item label="教室">{{ baseInfo.classRoom || '--'}}</el-descriptions-item>
      </el-descriptions>
      <div class="itemWrapper">
        <span class="itemTitle">任课教师信息</span>
      </div>
      <el-row :gutter="4" class="rowWrapper">
        <el-col :span="8" class="colItem" v-for="item in teacherList" :key="item.no">
          <div class="subjectItem">
            <img :src="item.iconUrl" class="itemImgCss"/>
            <!-- <img src="subject/mathematics.png" class="itemImgCss"/> -->
            <div class="subjectInfo">
              <p>学科：{{item.name}}</p>
              <p>任课老师：{{item.teacherName}}</p>
            </div>
          </div>
        </el-col>
      </el-row>
  </el-dialog>
</template>

<script>
import { detailClass } from '../js/class.js'
export default {
  components: {},
  data () {
    return {
      dialogVisible: false,
      baseInfo: {},
      classNo: '',
      teacherList: []
    }
  },
  computed: {},
  methods: {
    async add (row) {
      console.log(row)
      this.baseInfo = { ...row }
      this.classNo = row.classNo
      await this.getDetailClass(row.classNo)
      this.dialogVisible = true
    },
    async getDetailClass (data) {
      let res = await detailClass(data)
      this.teacherList = res.data.list
    },
    handleClose () {
      this.dialogVisible = false
    }
  },
  mounted () {}
}
</script>
<style scoped lang="scss">
.itemWrapper {
    margin: 10px 0;
  .itemTitle {
    height:40px;
    line-height:40px;
    font-size: 18px;
    font-weight: 600;
  }
}
.subjectItem {
  .itemImgCss {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .subjectInfo {
    margin-left: 10px;
    height: 40px;
    display: inline-block;
    p {
      margin-bottom: 5px;
    }
  }
}
.colItem {
  margin-bottom: 20px;
}
.rowWrapper {
  margin-bottom: 40px;
}
</style>
